<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title></title>
	<style type="text/css" media="screen">
	.time-graph {  
    padding-top: 20px;  
    display:flex;  
    display:-webkit-flex;  
    justify-content: center;  
    align-items: center;  
	}  
	#time-graph-canvas {  
	width: 80px;  
	height: 80px;  
	} 
	</style>
</head>
<body>
	<div class="time-graph">  
        <canvas id="time-graph-canvas" width="160" height="160"></canvas>  
    </div>  
</body>
<script type="text/javascript">
	var time_canvas = document.getElementById("time-graph-canvas");  
	drawMain(time_canvas, 70, "#85d824", "#efefef"); 
	function drawMain(draw_elem,percent,foreColor,bgColor){
		/*
		draw_elem 绘制对象
		percent:百分比
		foreColor:前背景
		bgColor:背景色
		 */
		var context = draw_elem.getContext('2d');
		var center_x = draw_elem.width / 2 ;
		var center_y = draw_elem.height / 2 ;
		var rad = 2*Math.PI / 100;
		console.log(rad)
		var speed = 0;
		//绘制背景图形
		function bgCricle(){
			context.save();
			context.beginPath();
			context.lineWidth = 8;
			var radius = center_x - context.lineWidth;
			context.lineCap = 'round';
			context.strokeStyle = bgColor;
			context.arc(center_x,center_y,radius,0,Math.PI*2,false);
			context.stroke();
			context.closePath();
			context.restore();
		}
		//绘制运动圆 
		function foreCicle(n){
			context.save();
			context.strokeStyle = foreColor;
			context.lineWidth = 8;
			context.lineCap = 'round';
			var radius = center_x - context.lineWidth;
			context.beginPath();
			context.arc(center_x,center_y,radius,-Math.PI/2,-Math.PI/2 + n*rad,false);
			context.stroke();
			context.closePath();
			context.restore();
		}
		// 绘制文字
		function text(n){
			context.save();
			context.fillStyle = foreColor;
			var font_size = 40;
			context.font = font_size +"px Arial";
			var text_width = context.measureText(n.toFixed(0)+"%").width;  
			context.fillText(n.toFixed(0)+"%", center_x-text_width/2, center_y + font_size/2);  
        	context.restore();
		}
		//执行动画
		(function drawFrame(){  
			window.requestAnimationFrame(drawFrame);
			context.clearRect(0, 0, draw_elem.width, draw_elem.height);  
	        bgCricle(); 
	        text(speed)
	        foreCicle(speed);
	        if(speed >= percent) return;  
        	speed += 1;    
	    }());  
	}
	// function drawMain(drawing_elem, percent, forecolor, bgcolor) {
 //            /*
 //                @drawing_elem: 绘制对象
 //                @percent：绘制圆环百分比, 范围[0, 100]
 //                @forecolor: 绘制圆环的前景色，颜色代码
 //                @bgcolor: 绘制圆环的背景色，颜色代码
 //            */
 //            var context = drawing_elem.getContext("2d");
 //            var center_x = drawing_elem.width / 2;
 //            var center_y = drawing_elem.height / 2;
 //            var rad = Math.PI*2/100; 
 //            var speed = 0;
            
 //            // 绘制背景圆圈
 //            function backgroundCircle(){
 //                context.save();
 //                context.beginPath();
 //                context.lineWidth = 8; //设置线宽
 //                var radius = center_x - context.lineWidth;
 //                context.lineCap = "round";
 //                context.strokeStyle = bgcolor;
 //                context.arc(center_x, center_y, radius, 0, Math.PI*2, false);
 //                context.stroke();
 //                context.closePath();
 //                context.restore();
 //            }

 //            //绘制运动圆环
 //            function foregroundCircle(n){
 //                context.save();
 //                context.strokeStyle = forecolor;
 //                context.lineWidth = 8;
 //                context.lineCap = "round";
 //                var radius = center_x - context.lineWidth;
 //                context.beginPath();
 //                context.arc(center_x, center_y, radius , -Math.PI/2, -Math.PI/2 +n*rad, false); //用于绘制圆弧context.arc(x坐标，y坐标，半径，起始角度，终止角度，顺时针/逆时针)
 //                context.stroke();
 //                context.closePath();
 //                context.restore();
 //            }

 //            //绘制文字
 //            function text(n){
 //                context.save(); //save和restore可以保证样式属性只运用于该段canvas元素
 //                context.fillStyle = forecolor;
 //                var font_size = 40;
 //                context.font = font_size + "px Helvetica";
 //                var text_width = context.measureText(n.toFixed(0)+"%").width;
 //                context.fillText(n.toFixed(0)+"%", center_x-text_width/2, center_y + font_size/2);
 //                context.restore();
 //            }

 //            //执行动画
 //            (function drawFrame(){
 //                window.requestAnimationFrame(drawFrame);
 //                context.clearRect(0, 0, drawing_elem.width, drawing_elem.height);
 //                backgroundCircle();
 //                text(speed);
 //                foregroundCircle(speed);
 //                if(speed >= percent) return;
 //                speed += 1;
 //            }());
 //        }
</script>
</html>